<template>
	<view class="container">
		<z-paging ref="paging" v-model="itemList" @query="queryList" :flex="true" empty-view-text="暂无商品数据~"
			empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
			<view slot="top">
				<u-navbar height="50">
					<view class="navbarView">
						<u-search placeholder="请输入名称搜索"
							v-model="keyword" @focus="onFocus" @search="onSearch"
							@custom="onSearch" @change="onChange"></u-search>
					</view>
				</u-navbar>
			</view>
			<view class="goodsItem" v-for="(item, index) in itemList" :key="index"
				@click="onGoodsDetails(item)">
				<view class="goodsImageView">
					<image class="goodsImage" mode="aspectFill" :src="item.images_format[0]"></image>
				</view>
				<view class="goodsTitle">{{item.name}}</view>
				<view class="goodsPriceView">
					<view class="goodsPrice" style="flex: 1;">¥{{item.freight_price}}</view>
					<!-- <image class="goodsAdd" src="/static/add.png"></image> -->
				</view>
			</view>
		</z-paging>
		<u-modal v-model="deleteDialog" :show-cancel-button="true"
			content="确定要清除历史记录吗？" @confirm="onDelConfirm">
		</u-modal>
		<view class="historyView" v-if="isFocus">
			<u-gap height="20" bg-color="#F5F5F5"></u-gap>
			<view class="historyTopView">
				<view class="historyTitle">历史记录</view>
				<u-image width="30rpx" height="30rpx" src="/static/del.png" @click="onDelete()"></u-image>
			</view>
			<view class="historyWrap">
				<view class="historyTab" v-for="(item,index) in historyList"
					:key="index" @click="onHistory(item)">
					{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				deleteDialog: false,
				keyword: '',
				historyList: [{
					title: '达人'
				}, {
					title: '橘子味小仙女'
				}, {
					title: '幽幽'
				}, {
					title: '一姐妹'
				}],
				itemList: [{},{},{}],
				isFocus: true
			}
		},
		methods: {
			onFocus() {
				this.isFocus = true
			},
			onSearch(value) {
				this.isFocus = false
			},
			onChange(value){
				this.keyword = value;
				this.isFocus = false
			},
			onDelete() {
				this.deleteDialog = true;
			},
			onHistory(item) {
				this.keyword = item.title;
			},
			onDelConfirm() {
				this.deleteDialog = false;
			},
			queryList(page, pageSize) {
				this.$refs.paging.complete(this.itemList);
			},
			onGoodsDetails(item) {
				this.$utils.jump('/pages/goods-details/goods-details?id=' + item.id);
			}
		}
	}
</script>

<style>
	@import url('goods-query.css');

	page {
		height: 100%;
		background: #F5F5F5;
	}
</style>
